<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="药品名称" prop="appointmentTime" />
    <el-table-column label="药品单价" prop="name" />
    <el-table-column label="药品编号" prop="id" />
    <el-table-column label="药品供应商" prop="partment" />
    <el-table-column label="药品简介" prop="selectedDoctor" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          修改预约
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          取消预约
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 编辑对话框 -->
  <el-dialog
    v-model="centerDialogVisible"
    title="修改预约"
    width="500"
    align-center
  >
    <el-form  :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="药品名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="药品单价">
        <el-input v-model="form.id" />
      </el-form-item>
      <el-form-item label="药品编号">
        <el-input v-model="form.appointmentTime" />
      </el-form-item>
      <el-form-item label="药品供应商">
        <el-input v-model="form.partment" />
      </el-form-item>
      <el-form-item label="药品简介">
        <el-input v-model="form.selectedDoctor" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认修改</el-button>
        <el-button @click="Cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const centerDialogVisible = ref(false);

interface appointmentDoctors {
  appointmentTime: string;
  name: string;
  id: string;
  partment: string;
  selectedDoctor: string;
}

const search = ref("");
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

// 编辑
const form = reactive({
  appointmentTime: "",
  name: "",
  id: "",
  partment: "",
  selectedDoctor: "",
});

const  originalData = reactive({})
let EditIndex  = 0

// 编辑
const handleEdit = (index: number, row: appointmentDoctors) => {
  EditIndex = index;
  originalData.appointmentTime = row.appointmentTime;
  originalData.name = row.name;
  originalData.id = row.id;
  originalData.partment = row.partment;
  originalData.selectedDoctor = row.selectedDoctor;

  form.appointmentTime = row.appointmentTime;
  form.name = row.name;
  form.id = row.id;
  form.partment = row.partment;
  form.selectedDoctor = row.selectedDoctor;

  centerDialogVisible.value = true;
};
// 确认修改
const onSubmit = () => {
  if (EditIndex >= 0) {
    tableData.value[EditIndex] = {
      appointmentTime: form.appointmentTime,
      name: form.name,
      id: form.id,
      partment: form.partment,
      selectedDoctor: form.selectedDoctor,
    };
    centerDialogVisible.value = false;
  } else {
    ElMessage.error("请先选择要修改的预约");
  }
};

// 取消
const Cancle = ()=>{
  centerDialogVisible.value = false;
  tableData.value[EditIndex] = originalData
}

// 删除
const handleDelete = (index: number, row: appointmentDoctors) => {
  console.log(index, row);
  ElMessageBox.confirm(
    "确认取消预约?",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "取消成功",
      });
      console.log(index, row);
      // 删除数据
      tableData.value.splice(index, 1);
      console.log(tableData);

    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消失败",
      });
    });
};

// table 数据  开始请求数据
const tableData = ref([
  {
    appointmentTime: "2016-05-03",
    name: "小明",
    id: "440981200304211919",
    partment: "外科",
    selectedDoctor: "小黄",
  },
  {
    appointmentTime: "2016-05-02",
    name: "小林",
    id: "440981200304211919",
    partment: "外科",
    selectedDoctor: "小黄",
  },
  {
    appointmentTime: "2016-05-04",
    name: "肖肖",
    id: "440981200304211919",
    partment: "外科",
    selectedDoctor: "小黄",
  },
  {
    appointmentTime: "2016-05-01",
    name: "巫子",
    id: "440981200304211919",
    partment: "外科",
    selectedDoctor: "小黄",
  },
]);



</script>
